﻿@model TestWebApplication.Models.Forms.UserRegistrationForm

@{
    ViewBag.Title = "Регистрация нового пользователя";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $('#Birthday').datepicker(
            {
                dateFormat: "dd.mm.yy",
                changeMonth: true,
                changeYear: true
            }
        );

        $("#Birthday").attr("readonly", "readonly");

        var defaultColor = getDefaultColor();
        $('#color-selector').css('background-color', defaultColor);

        $('#color-selector').ColorPicker({
            color: defaultColor,

            onShow: function (colpkr) {
                $(colpkr).fadeIn(200);
                return false;
            },
            onHide: function (colpkr) {
                $(colpkr).fadeOut(200);
                return false;
            },
            /*onChange: function (hsb, hex, rgb) {
            $('#color-selector').css('backgroundColor', '#' + hex);
            },*/
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).css('backgroundColor', '#' + hex);
                $("#LacesColor").val(hex);
                $(el).ColorPickerHide();
            }
        });

        function getDefaultColor() {
            value = $("#LacesColor").attr("value");
            if (value == undefined || value == null || value == '') {
                return '#C0C0C0';
            }
            return '#' + value;
        };

    });

</script>

<div class="info-text">Введите данные для регистрации нового пользователя. Все поля обязательны для заполнения.</div>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Регистрация нового пользователя</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.LoginName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LoginName)
            @Html.ValidationMessageFor(model => model.LoginName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Birthday)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Birthday)
            @Html.ValidationMessageFor(model => model.Birthday)
        </div>
        
        <div class="editor-label">
            @Html.LabelFor(model => model.LacesColor)
        </div>
        <div class="editor-field">
            <div id="color-selector-box">
                <!--<div id="color-selector" style="background-color: #C0C0C0;">-->
                <div id="color-selector">
                </div>
            </div>
            @Html.HiddenFor(model => model.LacesColor)
            @Html.ValidationMessageFor(model => model.LacesColor)
        </div>

        <div class="editor-label cleared-box">
            @Html.LabelFor(model => model.Password)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Password)
            @Html.ValidationMessageFor(model => model.Password)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ConfirmPassword)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ConfirmPassword)
            @Html.ValidationMessageFor(model => model.ConfirmPassword)
        </div>

        <div class="submit-batton">
            <input type="submit" value="Зарегистрироваться" />
        </div>
    </fieldset>
}
